<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
</head>

<body>

    <div class="keys">
        <div class="key" data-key="65">
            <div>c</div>
            <span class="sound">clap</span>
        </div>
        <div class="key" data-key="83">
            <div>S</div>
            <span class="sound">hihat</span>
        </div>
        <div class="key" data-key="68">
            <div>D</div>
            <span class="sound">kick</span>
        </div>
        <div class="key" data-key="70">
            <div>F</div>
            <span class="sound">openhat</span>
        </div>
        <div class="key" data-key="71">
            <div>G</div>
            <span class="sound">boom</span>
        </div>
        <div class="key" data-key="72">
            <div>H</div>
            <span class="sound">ride</span>
        </div>
        <div class="key" data-key="74">
            <div>J</div>
            <span class="sound">snare</span>
        </div>
        <div class="key" data-key="75">
            <div>K</div>
            <span class="sound">tom</span>
        </div>
        <div class="key" data-key="76">
            <div>L</div>
            <span class="sound">tink</span>
        </div>
    </div>

    <!-- 播放声音标签    -->
    <!-- video -->
    <audio data-key="71" src="./sounds/boom.wav"></audio>
    <audio data-key="65" src="./sounds/clap.wav"></audio>
    <audio data-key="83" src="./sounds/hihat.wav"></audio>
    <audio data-key="68" src="./sounds/kick.wav"></audio>
    <audio data-key="70" src="./sounds/openhat.wav"></audio>
    <audio data-key="72" src="./sounds/ride.wav"></audio>
    <audio data-key="74" src="./sounds/snare.wav"></audio>
    <audio data-key="76" src="./sounds/tink.wav"></audio>
    <audio data-key="75" src="./sounds/tom.wav"></audio>
    <script>
        // 按A键的时候播放clap
        // 1. js 捕获按键事件
        // js 是一个事件驱动的语言
        function playSound(event) {
            // console.log(event);
            let keyCode = event.keyCode;//.keyCode 获取按下的键盘按键Unicode值
            const audio = document.querySelector('audio[data-key="' + keyCode + '"]');
            // console.log(audio);
            if (audio) audio.play();
            const key = document.querySelector('.key[data-key="' + keyCode + '"]');
            // console.log(key);
            if (key) key.classList.add('playing');//classList.add('xxx')为 <div> 元素添加 名为('xxx')的 class 
            // if (event.key == 'a') {
            //     // console.log('a');
            //     // 2. 播放clap 
            //     const clapAudio = document.querySelector('#clap');
            //     // console.log(clapAudio);
            //     clapAudio.play();
            // }
        }
        window.addEventListener('keydown', playSound);

    </script>
</body>

</html>